<template>
  <div id="versionInfo">
    <!-- 头部 -->
    <BaseHeader :title="$t('translate33')" :rightIcon="null" @leftClick="$router.push('/')" />
    <div class="navBar" style="height: 56px; background-color: #fff" :style="{ paddingTop: `${headerHeight}px` }">
      <van-tabs v-model="active" :color="tabColor" style="height: 56px; margin-top: 5px" @click="handle">
        <!-- <van-tab :title="$t('translate13')" name="d"></van-tab> -->

        <van-tab :title="$t('translate14')" name="m"></van-tab>
        <van-tab :title="$t('translate15')" name="y"></van-tab>
      </van-tabs>
    </div>
    <div class="timeSelect">
      <div class="timeTitle">
        <div class="leftArrow" :style="{ backgroundImage: `url(${leftIcon}) ` }" @click="handlLeft"></div>
        <div class="centerText">
          <span>
            {{ titleDate }}
          </span>
          <!-- <span
            >2022{{ $t("year") }}09{{ $t("month") }}09{{ $t("day") }}
            {{ $t("Monday") }}</span
          > -->
        </div>
        <div class="rightArrow" :style="{ backgroundImage: `url(${rightIcon}) ` }" @click="handlRight"></div>
      </div>
      <div class="nowTime">{{ this.$t("translate77") }}</div>
      <div class="timeData">
        {{ $t("translate88") }}<span style="margin: 0 2px">{{ parseInt(sleepTime / 60) }}</span>{{ $t("translate59")
        }}<span style="margin: 0 2px">{{ parseInt(sleepTime % 60) }}</span>{{ $t("minute") }}
      </div>
    </div>
    <charBar :data="data" ref="charBar"></charBar>
    <div class="title titleSecond">{{ $t("translate78") }}</div>
    <HomeSwiper1 :data2="swiperData"></HomeSwiper1>
    <!-- <div class="title titleSecond">{{ $t("translate20") }}</div> -->
    <div class="card">
      <div class="title titleSecond1">{{ $t("translate67") }}</div>
      <BaseCell :class="['oneset', { last: list1.last }]" v-for="(item, index) in list1" :key="index" :left="item.left"
        :desc="item.desc" :right="item.right" :arrow="item.arrow" :switch="item.switch" :border="item.border"
        :hide="item.hide" :disable="item.disable" @click="handleCellClick(item.id)">
      </BaseCell>
    </div>
    <!-- <charPie :data="dataPie" :dw="dw" ref="charPie"></charPie> -->
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import charBar from "@/components/charBar.vue";
import charPie from "@/components/charPie.vue";
import HomeInfo from "@/components/HomeInfo.vue";
import HomeSwiper1 from "@/components/HomeSwiper1.vue";
import mixin from "@/mixins/mixins";
// import axios from 'axios';
import axios from "axios";
import { generateWifiPromise } from "@/util/index.js";
import e from "cors";
export default {
  name: "VersionInfo",
  mixins: [mixin],
  data() {
    return {
      active: this.$route.query.active,
      rightIconName: "ic_list_right",
      leftIconName: "ic_list_left",
      seatingtime: 0,
      sleepTime: 0,
      dw: "%",
      swiperData: [0, 0, 0, 0, 0],
      dataList: [
        {
          number: 0,
          unit: this.$t("minute"),
          infoName: this.$t("translate18"),
        },
        {
          number: 37.6,
          unit: "%",
          infoName: this.$t("translate19"),
        },
      ],
      dataPie: [
        { value: 0, name: this.$t("enum6") },
        { value: 0, name: this.$t("enum7") },
        { value: 0, name: this.$t("enum8") },
        { value: 0, name: this.$t("enum9") },
        { value: 0, name: this.$t("enum10") },
      ],
      data: {
        xData: [
          this.$t("translate71"),
          this.$t("translate72"),
          this.$t("translate73"),
          this.$t("translate7"),
        ],
        yData: [
          {
            value: 0,
            itemStyle: {
              color: "rgb(100,187,92)",
              borderRadius: [100, 100, 0, 0],
            },
            barWidth: "20%",
          },
          {
            value: 0,
            barWidth: "40%",
            itemStyle: {
              color: "rgb(237,111,33)",
            },
          },
          {
            value: 0,
            itemStyle: {
              color: "rgb(100,187,92)",
              borderRadius: [100, 100, 0, 0],
            },
            barWidth: "20%",
          },
          {
            value: 0,
            barWidth: "40%",
            itemStyle: {
              color: "rgb(237,111,33)",
            },
          },
        ],
      },
    };
  },
  components: {
    charBar,
    HomeInfo,
    charPie,
    HomeSwiper1,
  },
  computed: {
    ...mapState(["fwv", "hwv", "darkMode", "devId"]),
    ...mapGetters(["imgPath", "headerHeight"]),
    ...mapState({
      llightSleep: (state) => state.sleepStatistics.llightSleep,
      ldeepSleep: (state) => state.sleepStatistics.ldeepSleep,
      lSnoretimes: (state) => state.sleepStatistics.lSnoretimes,
      loutOfbed: (state) => state.sleepStatistics.loutOfbed,
      lSober: (state) => state.sleepStatistics.lSober,
      rSnoretimes: (state) => state.sleepStatistics.rSnoretimes,
      rSober: (state) => state.sleepStatistics.rSober,
      rdeepSleep: (state) => state.sleepStatistics.rdeepSleep,
      rlightSleep: (state) => state.sleepStatistics.rlightSleep,
      routOfbed: (state) => state.sleepStatistics.routOfbed,
      lbedCondition: (state) => state.bedCondition.lbedCondition,
      rbedCondition: (state) => state.bedCondition.rbedCondition,
      lheartRate: (state) => state.bedCondition.lheartRate,
      lrespiratoryRate: (state) => state.bedCondition.lrespiratoryRate,
      rheartRate: (state) => state.bedCondition.rheartRate,
      rrespiratoryRate: (state) => state.bedCondition.rrespiratoryRate,
      mac: (state) => state.mac.mac,
    }),
    list() {
      return [
        {
          // 状态
          id: 0,
          left: this.$t("translate68"),
          right:
            this.lbedCondition == 0
              ? this.$t("translate7")
              : this.lbedCondition == 1
                ? this.$t("translate8")
                : this.lbedCondition == 2
                  ? this.$t("translate9")
                  : this.$t("translate10"),
          arrow: false,
        },
        {
          // 呼吸
          id: 1,
          left: this.$t("translate69"),
          right: this.lrespiratoryRate + this.$t("translate11"),
          arrow: false,
        },
        {
          // 心率
          id: 0,
          left: this.$t("translate70"),
          right: this.lheartRate + this.$t("translate11"),
          arrow: false,
        },
        {
          // 深睡
          id: 1,
          left: this.$t("translate71"),
          right:
            parseInt(this.ldeepSleep / 60) +
            this.$t("translate59") +
            parseInt(this.ldeepSleep % 60) +
            this.$t("translate60"),
          arrow: false,
        },
        {
          // 浅睡
          id: 0,
          left: this.$t("translate72"),
          right:
            parseInt(this.llightSleep / 60) +
            this.$t("translate59") +
            parseInt(this.llightSleep % 60) +
            this.$t("translate60"),
          arrow: false,
        },
        {
          // 清醒
          id: 1,
          left: this.$t("translate73"),
          right:
            parseInt(this.lSober / 60) +
            this.$t("translate59") +
            parseInt(this.lSober % 60) +
            this.$t("translate60"),
          arrow: false,
          border: false,
        },
      ];
    },
    list1() {
      return [
        {
          // 状态
          id: 0,
          left: this.$t("translate68"),
          right:
            this.rbedCondition == 0
              ? this.$t("translate7")
              : this.rbedCondition == 1
                ? this.$t("translate8")
                : this.rbedCondition == 2
                  ? this.$t("translate9")
                  : this.$t("translate10"),
          arrow: false,
        },
        {
          // 呼吸
          id: 1,
          left: this.$t("translate69"),
          right: this.rrespiratoryRate + this.$t("translate11"),
          arrow: false,
        },
        {
          // 心率
          id: 0,
          left: this.$t("translate70"),
          right: this.rheartRate + this.$t("translate11"),
          arrow: false,
        },
        {
          // 深睡
          id: 1,
          left: this.$t("translate71"),
          right:
            parseInt(this.rdeepSleep / 60) +
            this.$t("translate59") +
            parseInt(this.rdeepSleep % 60) +
            this.$t("translate60"),
          arrow: false,
        },
        {
          // 浅睡
          id: 0,
          left: this.$t("translate72"),
          right:
            parseInt(this.rlightSleep / 60) +
            this.$t("translate59") +
            parseInt(this.rlightSleep % 60) +
            this.$t("translate60"),
          arrow: false,
        },
        {
          // 清醒
          id: 1,
          left: this.$t("translate73"),
          right:
            parseInt(this.rSober / 60) +
            this.$t("translate59") +
            parseInt(this.rSober % 60) +
            this.$t("translate60"),
          arrow: false,
          border: false,
        },
      ];
    },

    rightIcon() {
      return this.darkMode
        ? require(`../assets/${this.rightIconName}_Dark.png`)
        : require(`../assets/${this.rightIconName}_normal.png`);
    },
    leftIcon() {
      return this.darkMode
        ? require(`../assets/${this.leftIconName}_Dark.png`)
        : require(`../assets/${this.leftIconName}_normal.png`);
    },
  },
  watch: {
    titleDate: {
      handler(newVal, oldVal) {
        this.getData();
      },
    },
  },
  methods: {
    getData() {
      let mac = this.mac;
      for (let x = 0; x < mac.length; x++) {
        // console.log("x:", mac[x]);
        if (mac[x] == ":") {
          mac = mac.replace(":", "");
        }
      }

      console.log("mac:", mac);
      const jsonBody = {
        domain: "http://api.yzmte.com",
        path: "/oldApp/findByMac",
        method: "GET",
        param: {
          endTime: this.endTime,
          mac: mac,
        },
      };
      window.hilink.requestThirdPartConfig(
        JSON.stringify(jsonBody),
        "window.Ag.resultCallback2"
      );
      window.Ag.resultCallback2 = (res) => {
        console.log("1111");
        console.log("this.resultStr:", JSON.parse(res));
        let response = JSON.parse(res);
        let state = response.data.result_right.state;
        let state2 = response.data.result_right;

        let all =
          parseInt(state.deepSleep) +
          parseInt(state.lightSleep) +
          parseInt(state.sober) +
          parseInt(state.outBed);
        console.log("all:", all);
        console.log("state.deepSleep:", state.deepSleep);
        this.data.yData[0].value =
          state.deepSleep != "" ? (state.deepSleep / all).toFixed(2) * 100 : 0;
        this.data.yData[1].value =
          state.lightSleep != ""
            ? (state.lightSleep / all).toFixed(2) * 100
            : 0;
        this.data.yData[2].value =
          state.sober != "" ? (state.sober / all).toFixed(2) * 100 : 0;
        this.data.yData[3].value =
          state.outBed != "" ? (state.outBed / all).toFixed(2) * 100 : 0;
        this.sleepTime = state.sleepTime;
        this.swiperData = [];
        this.swiperData.push(state.sleepTime);
        this.swiperData.push(state2.grade);
        this.swiperData.push(state2.heartRate);
        this.swiperData.push(state2.breathe);
        this.swiperData.push(state2.snore);
        console.log(this.data.yData);
        this.$refs.charBar.draw();
      };
      // const jsonBody = {
      //   domain: "https://www.runoob.com",
      //   path: "/try/ajax/json_demo.json",
      //   method: "GET",
      //   param: {},
      // };
      // // web页面中需实现该函数，用来获取执行结果
      // window.Ag.resultCallback = (resultStr) => {
      //   var result = resultStr; // 请求的返回结果
      // };
      // window.hilink.requestThirdPartConfig(
      //   JSON.stringify(jsonBody),
      //   "resultCallback"
      // );
      console.log("this.endTime:", this.endTime);

      // hilink.doHttpsRequest(
      //   JSON.stringify({
      //     domain: "http://api.yzmte.com",
      //     path: "/oldApp/findByMac",
      //     method: "GET",
      //     param: {
      //       endTime:"2013-10-31 15:49:07",
      //       mac: "C10036000007",
      //     },
      //   }),
      //   (res)=>{
      //     console.log("ers111",res)
      //   }
      // );
      axios({
        method: "get",
        url:
          "http://api.yzmte.com/oldApp/findByMac?mac=" +
          mac +
          "&endTime=" +
          this.endTime,
      }).then((response) => {
        console.log(12222);
        console.log(response.data.data);
        let state = response.data.data.result_right.state;
        let state2 = response.data.data.result_right;
        let all =
          parseInt(state.deepSleep) +
          parseInt(state.lightSleep) +
          parseInt(state.sober) +
          parseInt(state.outBed);
        this.data.yData[0].value =
          state.deepSleep != "" ? parseInt((state.deepSleep / all) * 100) : 0;
        this.data.yData[1].value =
          state.lightSleep != "" ? parseInt((state.lightSleep / all) * 100) : 0;
        this.data.yData[2].value =
          state.sober != "" ? parseInt((state.sober / all) * 100) : 0;
        this.data.yData[3].value =
          state.outBed != "" ? parseInt((state.outBed / all) * 100) : 0;
        this.sleepTime = state.sleepTime;
        this.swiperData = [];
        this.swiperData.push(state.sleepTime);
        this.swiperData.push(state2.grade);
        this.swiperData.push(state2.heartRate);
        this.swiperData.push(state2.breathe);
        this.swiperData.push(state2.snore);
        console.log(this.data.yData);
        this.$refs.charBar.draw();
      });
    },
  },
  created() {
    //this.getBar();
    window.hilink.setTitleVisible(false, "window.Ag.setTitleVisible");
    window.Ag.setTitleVisible = (res) => { };

    // this.getData();
    window.hilink.overrideBackPressed(
      true, // boolean, true启用，false不启用
      'window.Ag.resultCallback11' // string，成功或失败时，将调用传入resultStr返回结果
    );
    window.Ag.resultCallback11 = (res) => {
      window.goBack = () => {
        if (this.popupShow) {
          this.popupShow = 0;
          return;
        }
        this.$router.push("/");
      };
    };

    // 重置物理返回键
    window.goBack = () => {
      if (this.popupShow) {
        this.popupShow = 0;
        return;
      }

    };
  },
};
</script>
<style lang="less" scoped>
@import url("../style/public.less");

/deep/.van-tabs__line {
  width: 5rem !important;
}

// 适配
.pad {
  #versionInfo {
    .content {
      margin: 0 var(--pad_column_1);
    }
  }
}
</style>